<template>
  <el-dialog v-model="mainStore.showWalletDialog" title="Choose Wallet" width="fit-content" center>
    <div class="modalinfo">
      <div class="modal-content">
        <button @click="chooseWallet('okxwallet')">
          <img :src="OKX" />
          <div>OKX</div>
        </button>
        <button @click="chooseWallet('metamask')">
          <img :src="MetaMask" />
          <div>MetaMask</div>
        </button>
        <button @click="chooseWallet('tp')" v-if="isMobile()">
          <img :src="TokenPocket" />
          <div>TokenPocket</div>
        </button>
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import OKX from '@/assets/images/OKX.webp';
import MetaMask from '@/assets/images/MetaMask.webp';
import TokenPocket from '@/assets/images/TokenPocket.webp';

import { chooseWallet } from '@/a-wallet';
import { isMobile } from '@/utils/common';
import { useMainStore } from '@/store';

const mainStore = useMainStore();
</script>

<style lang="scss" scoped>
.modalinfo {
  width: 300px;
  .modal-content {
    width: 100%;
    padding: 20px;
    button {
      width: 100%;
      background: transparent;
      border: 1px solid rgb(50, 50, 51);
      border-radius: 10px;
      font-size: 20px;
      color: #000;
      padding: 10px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      &:last-child {
        margin-bottom: 0;
      }
      img {
        width: 50px;
        height: 50px;
        border-radius: 10px;
      }
      > div {
        width: calc(100% - 60px);
      }
    }
  }
}
</style>
